<template>
    <div>
        <el-form :model="formData" :rules="rules"  label-width="100px">
            <el-form-item label="收货地址" >
                <el-select v-model="formData.province" placeholder="请选择省份" style="width: 30%" @change="selectProvince" value-key="id">
                    <el-option v-for="province in provinceList" :key="province.id" :label="province.name" :value="province"></el-option>
                </el-select>
                <el-select v-model="formData.city" placeholder="请选择城市" style="width: 30%" @change="selectCity" value-key="id"> 
                    <el-option v-for="city in cityList" :key="city.id" :label="city.name" :value="city"></el-option>
                </el-select>
                <el-select v-model="formData.county" placeholder="请选择区/县" style="width: 30%" value-key="id" @change="selectCounty">
                    <el-option v-for="county in countyList" :key="county.id" :label="county.name" :value="county" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="detailaddress">
                <el-input v-model="formData.detailaddress" style="width:80%"></el-input >
            </el-form-item>
            <el-form-item label="收货人" prop="accept">
                <el-input v-model="formData.accept" style="width:80%"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="cellphone" >
                <el-input v-model="formData.cellphone" style="width:80%"></el-input>
            </el-form-item>
            <el-form-item label="设为默认" prop="defaultaddr">
                <el-switch v-model="formData.defaultaddr" default="false"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button @click="quit()">取消</el-button>   
                <el-button @click="resetForm()">重置</el-button>
                <el-button type="primary" @click="submitForm()">添加</el-button>
            </el-form-item>
        </el-form>
    </div>


</template>

<script>
export default{
    data() {
        return {
            provinceList:[],
            cityList:[],
            countyList:[],
            formData: {},
            rules: {
            
                province: [
                    { required: true, message: '请选择省份', trigger: 'change' }
                ],
                city: [
                    { required: true, message: '请选择城市', trigger: 'change' }
                ],
                county: [
                    { required: true, message: '请选择区/县', trigger: 'change' }
                ],
                detailaddress: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                 
                ],
                accept: [
                    { required: true, message: '请输入收货人', trigger: 'blur' },
                  
                ],
                cellphone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
                ]

            
            
            }
        };
    },
    methods: {
        selectProvince(province){
             this.countyList=[],
             this.cityList=province.children;
        },
        selectCity(city){
           
            this.countyList=city.children

        },
        selectCounty(county){
            
        },
    
        quit(){
            this.formData={}
            this.$emit("quit")
        },
        submitForm() {
            //整理数据
            let temp=JSON.parse(JSON.stringify(this.formData))//复制表单数据

            temp.address=this.formData.province.name + " " + this.formData.city.name + " "+this.formData.county.name
            temp.contactperson = this.formData.accept
            temp.phone = this.formData.cellphone
        
            if(this.formData.defaultaddr){
                temp.status = 1
            }else{
                temp.status = 0
            }
            this.$emit("submitForm",temp)
            this.formData={}
         
        },
        resetForm() {
            this.formData={}
       
        }
    },
    mounted(){
        this.$axios.get("/address/getPccList").then(respData=>{
            console.log("打印省市区联动列表")
            console.log(respData)
            this.provinceList=respData.data.data
        })

    }


}
</script>

<style scoped></style>